<template>
	<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
		<!-- 预约信息 -->
		<view style="width: 702rpx; height: 107rpx; display: flex;justify-content: space-between;align-items: center;">
			<text style="font-size: 30rpx;color: #333333;line-height: 30rpx;">{{ teacherName }}{{ zhiwu }}</text>
			<text style="font-size: 32rpx;color: #F96A15;line-height: 32rpx;">￥{{ post_cost }}</text>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 10rpx;background-color: #F7F8FF;"></view>
		<!-- 姓名 -->
		<view style="width: 702rpx;height: 86rpx; display: flex;align-items: center;">
			<text style="width: 120rpx; font-size: 28rpx;color: #333333;">姓名</text>
			<input placeholder="输入姓名" placeholder-class="inputClass" :value="name" @input="changeNameInput" style="font-size: 28rpx;color: #333333;margin-left: 50rpx;" />
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>
		<!-- 身份证 -->
		<view style="width: 702rpx;height: 86rpx; display: flex;align-items: center;">
			<text style="width: 120rpx;font-size: 28rpx;color: #333333;">身份证</text>
			<input
				placeholder="输入身份证号码"
				type="idcard"
				placeholder-class="inputClass"
				:value="idcard"
				@input="changeIdcardInput"
				style="font-size: 28rpx;color: #333333;margin-left: 50rpx;"
			/>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>
		<!-- 手机号 -->
		<view style="width: 702rpx;height: 86rpx; display: flex;align-items: center;">
			<text style="width: 120rpx;font-size: 28rpx;color: #333333;">手机号</text>
			<input
				placeholder="输入11位手机号码"
				type="number"
				placeholder-class="inputClass"
				:value="mobile"
				@input="changeMobileInput"
				style="font-size: 28rpx;color: #333333;margin-left: 50rpx;"
			/>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>
		<!-- 我的位置 -->
		<view style="width: 702rpx;height: 86rpx; display: flex;align-items: center;">
			<text style="width: 120rpx;font-size: 28rpx;color: #333333;">我的位置</text>
			<picker mode="region" @change="changeArea">
				<view style="font-size: 28rpx;color: #999999;margin-left: 50rpx; height: 86rpx; display: flex; align-items: center; width: 100%;">
					{{ province }}{{ city }}{{ area }}
				</view>
			</picker>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>
		<!-- 预约时间 -->
		<view style="width: 702rpx;height: 86rpx; display: flex;align-items: center;">
			<text style="width: 120rpx;font-size: 28rpx;color: #333333;">预约时间</text>
			<picker mode="date" value="" @change="bindDateChange">
				<view style="font-size: 28rpx;color: #999999;margin-left: 50rpx; height: 86rpx; display: flex; align-items: center;width: 100%;">{{ ordertime }}</view>
			</picker>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>

		<!-- 备注 -->
		<view style="width: 702rpx; font-size: 28rpx;color: #333333;margin-top: 29rpx;">备注</view>
		<textarea
			placeholder-class="inputBottomClass"
			placeholder="请填写备注!"
			:value="remark"
			@input="changeRemarkInput"
			style="width: 702rpx;height: 200rpx; margin-top: 29rpx;"
		/>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>

		<!-- 预约按钮 -->
		<view
			@click="pay"
			style="width: 702rpx;height: 86rpx;color: #FFFFFF;background-color: #3187FB;text-align: center;line-height: 86rpx;font-size: 32rpx;
			position: fixed;bottom: 20rpx;"
		>
			立即预约
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			date: '2020-01-27',
			// 教练ID
			id: '',
			//教练姓名
			teacherName: '',
			//科目名称
			subjectName: '',
			// 预约价格
			post_cost: '',
			//用户姓名
			name: '',
			// 用户手机号
			mobile: '',
			//身份证号码
			idcard: '',
			// 省份
			province: '请选择地址',
			//市
			city: '',
			// 区
			area: '',
			// 预约时间
			ordertime: '请选择时间',
			// 备注
			remark: '',
			// 支付方式
			pay_type: 1,
			// 地址
			arr: [],
			zhiwu: '',
		};
	},
	onLoad() {
		// 取路由带过来的数据

		this.id = this.$Route.query.id;
		this.teacherName = this.$Route.query.name;
		this.zhiwu = this.$Route.query.zhiwu;
		console.log('this.zhiwu :>> ', this.zhiwu);
		this.post_cost = this.$Route.query.post_cost;
	},
	methods: {
		// 下单预约
		async pay() {
			// 获取教练数据
			let res;
			try {
				res = await this.$request.post('api/Jxapi/order_bm', {
					data: {
						article_id: this.id,
						name: this.name,
						mobile: this.mobile,
						idcard: this.idcard,
						province: this.province,
						city: this.city,
						area: this.area,
						ordertime: this.ordertime,
						remark: this.remark,
						pay_type: this.pay_type,
					},
				});
				if (!res.data.code) {
					uni.$showMsg(res.data.msg);
				}

				let info = res.data.data;

				console.log('res:', res);
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: info.timeStamp,
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType,
					paySign: info.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			// if (res.data.code == 1) {
			// 	// 下单成功
			// 	uni.showToast({
			// 		title: res.data.msg,
			// 	});
			// } else {
			// 	// 下单失败
			// 	uni.showToast({
			// 		title: res.data.msg,
			// 	});
			// }
			// console.log('res', res);
		},
		//改变选择时间
		bindDateChange(e) {
			this.ordertime = e.target.value;
			console.log(this.ordertime);
		},
		// 选择地区
		changeArea(e) {
			this.arr = e.target.value;
			this.province = this.arr[0];
			this.city = this.arr[1];
			this.area = this.arr[2];
		},
		//姓名输入框改变内容
		changeNameInput(e) {
			this.name = e.target.value;
		},
		//身份证输入框改变内容
		changeIdcardInput(e) {
			this.idcard = e.target.value;
		},
		//手机号输入框改变内容
		changeMobileInput(e) {
			this.mobile = e.target.value;
		},
		//备注输入框改变内容
		changeRemarkInput(e) {
			this.remark = e.target.value;
		},
	},
};
</script>

<style lang="scss" scoped>
.inputClass {
	font-size: 28rpx;
	color: #999999;
}

/deep/input {
	height: 86rpx;
}

/deep/ .inputBottomClass {
	font-size: 28rpx;
	color: #999999;
}
</style>
